<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>天天美印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<script type="text/javascript" src="swiper.min.js"></script>
	<link type="text/css" rel="stylesheet" href="common.css" />
	<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="swiper.min.css" />
	<style type="text/css">
		ul,li{
			padding:0;
			margin:0;
		}
		body{
			/*background:#f2f2f2;*/
		}

		/*main css*/
        .margin{
            position:fixed;
            top:0;
            width:100%;
            background:#fff;
        }
		#main{
			width:100%;
		}
		div#cover{
			position: relative;
		}
		div#cover img{
			width:100%;
		}
		div#cover div#category{
			display: block;
			position: absolute;
			bottom:0;
			left:0;
			width:100%;
			background: rgba(255,255,255,0.7);
			color:#000;
			font-size:1.8rem;
			padding:12px;
			font-weight: bold;
		}
		div#cover div#category div{
			float: right;
			display: inline-block;
			color:#808080;
			font-size:1.5rem;
			margin-top:3px;
			font-weight: normal;
		}
		div#cover div#category div span{
			margin-left:5px;
			text-decoration: line-through;
		}

	    div#price{
	    	padding:12px;
	    	color:#363133;
	    	font-size:2rem;
	    	font-weight: bold;
	    	position: relative;
	    	margin-bottom:20px;
	    }
	    div#price:after{
	    	content: '';
	    	width:100%;
	    	height: 15px;
	    	background: url(wave_line.png) center center no-repeat;
	    	background-size:100%;
	    	position: absolute;
	    	top:50px;
	    	left:0;
	    }
	    div#price button{
	    	float:right;
	    	font-size:1.8rem;
	    	margin-top:2px;
	    	background: transparent;
	    	color:#ec135a;
	    	border:none;
	    	border-radius:15px;
	    	font-weight: normal;
	    }

	    h3{
	    	background: #dcdcda;
	    	color:#221c1c;
	    	text-align: center;
	    	margin:7px 0 0;
	    	font-size:1.8rem;
	    	padding:3px 0;
	    }
	    div#product-details{
	    	text-align: center;
	    }
	    div#product-details p{
	    	padding:0;
	    	margin:0;
	    }
	    div#product-details div{
	    	padding:12px;
	    }
	    div#product-details img{
	    	display: block;
	    	width:100%;
            height:auto !important;
	    }
    
    /*轮播图*/
    #banner{
        background: #303030;
        width:100%;
        overflow-x:hidden;
        padding:5px 5px 5px 0px;
    }
    #banner ul{
        width:100%;
        overflow-x:auto;
        word-break:keep-all;
        white-space:nowrap;
    }
    #banner ul li{
        display: inline-block;
        margin-left:5px;
        /*width:25%;*/
        height:70px;
        width:auto;
    }
    #banner ul li img{
        /*width:100%;*/
        height:100%;
    }
    i{
        font-style:normal;
    }
    .block{
        height:347px;
    }
	</style>
</head>
<body>
	<!-- <div id="header">
		<div class="topbar">
			<span>我的时鲜生</span>
		</div>
	</div> -->
	<div id="main">
        <div class="margin">
		<div id="cover">
			<img src="detail_01.png" />
			<div id="category">
				<span id="category_name">毕业纪念台历</span>
				<div>
					总价:<i id="newPrice">25.0</i>元<span>￥<i id="oldPrice">50.5</i>元</span>
				</div>
			</div>
		</div>
        
        <div id="banner">
            <!-- <ul>
				<li><img src="../images/work_01.png" /></li>
                <li><img src="../images/work_01.png" /></li>
                <li><img src="../images/work_01.png" /></li>
                <li><img src="../images/work_01.png" /></li>
                <li><img src="../images/work_01.png" /></li>
            </ul> -->
        </div>

	   	<div id="price">
			宝贝详情
			<button class="toorder">继续编辑</button>
	   	</div>
        </div>
        <div class="block"></div>
   	 	<div id="product-details">
			<h3>旅行记——实木创意台历</h3>
			<div id="content">
				<p>原木底座，天然，简约手工质朴</p>
				<img src="detail_01.png" />
			</div>
   	 	</div>
	</div>
	<div id="footer">
		
	</div>
</body>
<script type="text/javascript">
    var product = api.getProductInfo();
    //var imagePath = api.getImagePath();
    var Kong = api.getKong();
    
   
    $("#category_name").html(product.category);
    //$("#price span").html(product.price);
    $("#product-details h3").html(product.category+"--"+product.name);
    $("#newPrice").html(product.priceS);
    $("#oldPrice").html(product.prom);
    
    
    //var object = api.getProductInfo();
   
    //alert(imagePath);
	$(document).ready(function(){
		// $("ul li:after").css("margin-top",$("ul li img").height());
        //获取小图
                      if(Kong.kong == "666"){
                      $(".toorder").hide();
                      }else{
                      $(".toorder").show();
                      }
                      
        $.ajax({
               url:"http://ttmy.len.so/app/works/getpics/id/"+product.workid,
               type:'get',
               dataType:'JSONP',
               success: function(data){
               
               
                    var imgdiv = '<ul>';
               
                    $("#banner").html("");
               
                    for(var i in data){
               
                        var img = data[i];
               
                        imgdiv += '<li><img class="swiper-img" imgpath="'+img+'" src="http://7xqkvn.com1.z0.glb.clouddn.com/'+img+'" /></li>';
               
                    }
               
                    imgdiv+="</ul>";
                    $("#banner").html(imgdiv);
               }

            })
                      
                      
		

    	var productid = product.productid;
                     
    	$.ajax({ 
          url:"http://ttmy.len.so/app/appapi/getcontent/id/"+productid, 
          type:'get',     
          dataType:'JSONP',
          //data:{name:value},           
          success: function(data){
          	//console.log(data)
          	$("#content").html(data.content);
               //alert(JSON.stringify(data))
               
               $("#cover img").attr("src",'http://7xqkvn.com1.z0.glb.clouddn.com/'+data.xiaoguo+'?imageView2/2/w/600');
               
          }
               });
                  
                      
	})

 	function bindEvent () {
	  	var mc = new Hammer.Manager(document.body);
	    mc.add(new Hammer.Tap());
	    
	    mc.on("tap", function (e) {
	    	
	        var className=$(e.target).attr("class");

            if(className == "swiper-img"){
              
              var imgpath = $(e.target).attr("imgpath");
              
              api.shownetImage(imgpath);

            }
            if(className == "toorder"){
              api.normalToDetail();
            }

	        // if(e.target.id=="btn-login"){
	        // 	window.location.href=$(e.target).attr("data")+".html";
	        // }

	    });
	}
	bindEvent();
    
    //var blockH =$("#cover").height()+145;
    //api.log(123);
    //api.log(blockH);
    //$(".block").css("height",blockH);
    
    //api.log($("#cover img").height());
    //api.log($("#cover img").attr("src"));
</script>
</html>